<template>
    <div>
        <img src="./img/logo.jpg" style="width:100px;position: absolute;top:100px;left:250px" alt="" class="logo_img">
        <!-- 头部 -->
        <header class="header">
            <div class="header_left fl">
                <span class="fr">17777395846</span>
                <i class="fr"></i>
                <router-link to="/about" class="contact fr">联系我们</router-link>
            </div>
            <div class="header_right fl">
                <span class="name" v-if="userList">欢迎 {{userList.userAccount}} 用户登录系统</span>
                <div class="btn" style="float:right">
                    <router-link class="a" target="_blank" to="/login">用户登录</router-link>
                    <router-link class="a" target="_blank" to="/register">免费注册</router-link>
                    <router-link class="a" target="_blank" to="/sysLogin">系统登录</router-link>
                    <router-link class="a" target="_blank" to="/layout/layoutshouye">用户信息</router-link>
                    <router-link class="a" target="_blank" to="/sysout/sysoutshouye">系统信息</router-link>
                    <button class="a" @click="exitUser()">退出登录</button>
                </div>
            </div>
        </header>
        <!-- 搜索框 -->
        <section class="section_search">
            <div class="w">
                <div class="section_search_top">
                    <div class="search_left fl">
                        独<i class=" fa fa-handshake-o"></i>风"维"拍卖
                        <!-- <img src="./img/logo1.png" style="height:100%" alt=""> -->
                    </div>
                    <div class="search_right fl">
                        <form>
                            <input name="content" type="text" v-model="keyword" placeholder="请输入商品名称">
                            <input name="btn" type="button" @click="goSearch" value="搜索">
                        </form>
                    </div>
                </div>
            </div>
        </section>
        <!-- 导航 -->
        <section class="section_nav">
        <div class="w">
            <nav class="nav">
                <!-- <span id="nav_bg" class="nav_bg"></span>
                <div class="bar" id="nav_bar"></div> -->
                <ul id="nav_ul">
                    <li>
                        <!-- :style="{minHeight:this.$route.path == '/layout/usersubmit'?1060+'px':880+'px'}" -->
                        <router-link to="/home" class="nav_li" :style="{backgroundColor:this.$route.path == '/home'?'#f0f0f0':'#fff',color:this.$route.path == '/home'?'red':'rgb(94, 94, 94)',borderBottom:this.$route.path == '/home'?'2px solid red':'0'}">首页</router-link>
                    </li>
                    <li>
                        <router-link to="/paimai" class="nav_li" :style="{backgroundColor:this.$route.path == '/paimai'?'#f0f0f0':'#fff',color:this.$route.path == '/paimai'?'red':'rgb(94, 94, 94)',borderBottom:this.$route.path == '/paimai'?'2px solid red':'0'}">拍卖物品</router-link>
                    </li>
                    <li>
                        <router-link to="/inform" class="nav_li" :style="{backgroundColor:this.$route.path == '/inform'?'#f0f0f0':'#fff',color:this.$route.path == '/inform'?'red':'rgb(94, 94, 94)',borderBottom:this.$route.path == '/inform'?'2px solid red':'0'}">拍卖咨询</router-link>
                    </li>
                    <li>
                        <router-link to="/word" class="nav_li" :style="{backgroundColor:this.$route.path == '/word'?'#f0f0f0':'#fff',color:this.$route.path == '/word'?'red':'rgb(94, 94, 94)',borderBottom:this.$route.path == '/word'?'2px solid red':'0'}">在线评价系统</router-link >
                    </li>
                    <li>
                        <router-link to="/about" class="nav_li" :style="{backgroundColor:this.$route.path == '/about'?'#f0f0f0':'#fff',color:this.$route.path == '/about'?'red':'rgb(94, 94, 94)',borderBottom:this.$route.path == '/about'?'2px solid red':'0'}">关于我们</router-link>
                    </li>
                    
                </ul>
            </nav>
        </div>
        </section>
    </div>
</template>

<script>
    import axios from 'axios'
    import badwordsArr from '../../utils/badwords'
    export default {
        name:'Header',
        data() {
            return {
                keyword:'',
                badwords:'',
                userList:'',
            }
        },
        mounted() {
            // 通过全局事件总线消除关键字
            this.$bus.$on('clear',()=>{
                this.keyword = '';
            })
            this.getuser()
            // this.badwords = badwordsArr
            // console.log("坏词有：",this.badwords)
        },
        methods: {
            //搜索按钮的回调函数
            goSearch(){
                // 搜索要求
                this.badwords = badwordsArr
                console.log("坏词有：",this.badwords)
                var re =''
                for(var i=0;i<this.badwords.length;i++){
                    if(i==this.badwords.length-1)
                        re+=this.badwords[i];
                    else
                        re+=this.badwords[i]+"|";
                }
                // 生成正则表达式，gi全局检验
                var pat = new RegExp(re,"gi");
                if(pat.test(this.keyword)){
                    alert("请输入与商品竞拍相关的关键词关键字");
                    this.keyword = ''
                }else{
                    //添加关键词
                    axios.get("http://localhost:8080/api/addUserSearch/addUserSearchlist",{
                      params:{
                        userId:localStorage.getItem('Token')||0,
                        userSearch:this.keyword
                      }
                    }).then(
                      res=>{
                        this.$message({
                          message:'本次搜索已入库',
                          type:'success'
                        })
                      },
                      error=>{
                        console.log("88",error.message)
                      }
                    )
                    // 如果有query参数，也带上
                    if(this.$route.query){
                        let location = {name:'search',params:{keyword:this.keyword||undefined}}
                        location.query=this.$route.query;
                        this.$router.push(location);
                    }
                }
            },
            getuser(){
                axios.get("http://localhost:8080/api/userlist/getlist",{
                  params:{
                    userId:localStorage.getItem('Token')
                  }
                }).then(
                  res=>{
                    this.userList = res.data[0]
                    console.log("用户信息为：",res.data,this.userList)
                  },
                  error=>{
                    console.log("88",error.message)
                  }
                )
            },
            exitUser(){
                // 需要做的事情
                /*
                    1、需要发送亲求，通知服务器退出登录【清除一些数据token】
                    2、清除当前项目中的数据[用户信息、token]
                */
                try {
                    this.$store.dispatch('userExit')
                    //回到首页
                    this.$router.push('/home')
                    this.$router.go(0)
                } catch (error) {
                    alert(error.message);
                }
            }
        },

    }
</script>

<style scoped>
/* .logo_img{
    animation: rotate 10s  linear infinite; 
}
@keyframes rotate {
     0%{
        transform: rotate(0);
     }
     100%{
         transform: rotate(360deg);
     }
} */
.header{
    width: 1920px;
    height: 80px;
    background-color: red;
}
.header_left{
    width: 30%;
    height: 100%;
    line-height: 80px;
    padding: 0 20px;
}
.header_left a.contact{
    margin-right: 20px;
}
.header_right{
    width: 70%;
    height: 100%;
    line-height: 80px;
    line-height: 40px;
}
.header_right .name{
    width: 40%;
    height: 100%;
    padding: 20px;
    float: left;
    text-align: right;
}
.header_right .btn{
    width: 60%;
    height: 100%;
    /* margin-left: 550px; */
    float: left;
    padding: 20px;
}
.header_right .btn .a{
    width: 80px;
    height: 40px;
    float: left;
    margin-right: 20px;
    border: 1px solid #ededed;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
}
/* .header_right .btn .a:first-child{
    margin-left: 150px;
} */
.section_search,
.section_nav{
    width: 1920px;
    height: 80px;
    background-color: #fff;
}
.section_search .section_search_top{
    width: 100%;
    height: 80px;
}
.section_search_top .search_left{
    width: 35%;
    height: 100%;
    color: #393939;
    text-align: center;
    padding: 20px 0 20px 20px;
    line-height: 40px;
    font-size: 40px;
    font-family: "楷体";
    font-weight: bold;
}
.search_right{
    width: 65%;
    height: 100%;
    padding: 20px;
}
.search_right form{
    height: 100%;
}
.search_right form input:first-child{
    width: 350px;
    height: 100%;
    border-bottom: 2px solid rgba(255, 0, 0, .7);
    border-left: 2px solid rgba(255, 0, 0, .7);
    border-top: 2px solid rgba(255, 0, 0, .7);
    padding-left: 10px;
    border-radius: 5px 0 0 5px;
    float: left;
}
.search_right form input:first-child:focus{
    border-color: rgba(255, 0, 0);
}
.search_right form input:last-child{
    width: 80px;
    height: 100%;
    background-color: rgba(255, 0, 0, .9);
    float: left;
    font-size: 18px;
    border-radius: 0 5px 5px 0;
    color: #b9b9ba;
    cursor: pointer;
}
.search_right form input:last-child:hover{
    color: #fff;
    background-color: rgba(255, 0, 0);
}
.nav{
    width: 100%;
    height: 80px;
    position: relative;
}
.nav ul{
    width: 60%;
    height: 100%;
    position: relative;
}
.nav .nav_bg{
    position: absolute;
    width: 126px;
    height: 80px; 
    left: 0;
    top: 0;
    background-color: #f0f0f0;
}
.nav ul li{
    width: 20%;
    height: 100%;
    float: left;
}
.nav ul li:first-child a{
    color: red;
}
.nav ul li a{
    display: block;
    width: 100%;
    height: 100%;
    line-height: 80px;
    text-align: center;
    color: rgb(94, 94, 94);
}
</style>